<template>
  <custom-modal
    v-if="visible"
    :width="width"
    :visible="visible"
    :title="$t('releaseNote')"
    :destroyOnClose="true"
    class="releaseNoteLanguageComp"
    @cancel="handleCancel"
    @ok="handleOk"
    modalCls=".releaseNoteLanguageComp"
    :bodyStyle="{ height: '500px', overflowY: 'auto' }">
    <template slot="footer">
      <a-button v-if="!isEdit" type="primary" @click.stop="handleCancel">{{ $t('back') }}</a-button>
    </template>
    <a-form-model ref="ruleForm" :model="originReleaseNotes[language]" class="AsteriskAfter newEditStyle">
      <a-form-model-item></a-form-model-item>
      <a-form-model-item :label="$t('language')">
        <a-select v-model="language" optionFilterProp="children" :filterOption="$commonFun.filterOption">
          <a-select-option v-for="(item) in releaseNoteLangs" :key="item" :value="item" :title="$t(item)">
            <span>{{ $t(item) }}</span>
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- 版本描述 -->
      <a-form-model-item
        v-if="!noshowItem.includes('description')"
        :label="$t('versionDescription')"
        :validateStatus="checkConfig[language].description.validateStatus"
        :class="{ requiredFormItem: requireFields.includes('description') }"
        prop="description">
        <custom-text-area
          v-if="isEdit"
          @change="handlerChange(language, 'description', $event)"
          :val="originReleaseNotes[language].description"
          :max-len="500"></custom-text-area>
        <a-row v-else class="rowBox">
          <a-col :xs="24">
            <packup-elipsis :text="originReleaseNotes[language].description"></packup-elipsis>
          </a-col>
        </a-row>
        <div class="ant-form-explain">{{ $t('pleaseInput') }}</div>
      </a-form-model-item>
      <!-- 功能新增 -->
      <a-form-model-item
        :validateStatus="checkConfig[language].functionAddition.validateStatus"
        v-if="!noshowItem.includes('functionAddition')"
        :label="$t('funcAdd')"
        :class="{requiredFormItem: requireFields.includes('functionAddition')}"
        prop="functionAddition">
        <custom-text-area
          v-if="isEdit"
          :key="'functionAddition' + language"
          @change="handlerChange(language, 'functionAddition', $event)"
          :val="originReleaseNotes[language].functionAddition"
          :max-len="500"></custom-text-area>
        <a-row v-else class="rowBox">
          <a-col :xs="24">
            <packup-elipsis :text="originReleaseNotes[language].functionAddition"></packup-elipsis>
          </a-col>
        </a-row>
        <div class="ant-form-explain">{{ $t('pleaseInput') }}</div>
      </a-form-model-item>
      <!-- 功能优化 -->
      <a-form-model-item
        v-if="!noshowItem.includes('functionOptimization')"
        :validateStatus="checkConfig[language].functionOptimization.validateStatus"
        :label="$t('funcOptimize')"
        :class="{requiredFormItem: requireFields.includes('functionOptimization')}"
        prop="functionOptimization">
        <custom-text-area
          v-if="isEdit"
          @change="handlerChange(language, 'functionOptimization', $event)"
          :val="originReleaseNotes[language].functionOptimization"
          :max-len="500"></custom-text-area>
        <a-row v-else class="rowBox">
          <a-col :xs="24">
            <packup-elipsis :text="originReleaseNotes[language].functionOptimization"></packup-elipsis>
          </a-col>
        </a-row>
        <div class="ant-form-explain">{{ $t('pleaseInput') }}</div>
      </a-form-model-item>
      <!-- 特别鸣谢 -->
      <a-form-model-item
        v-if="!noshowItem.includes('acknowledgements')"
        :label="$t('specialThanks')"
        prop="acknowledgements">
        <custom-text-area
          v-if="isEdit"
          :rows="3"
          @change="handlerChange(language, 'acknowledgements', $event)"
          :val="originReleaseNotes[language].acknowledgements"
          :max-len="45"></custom-text-area>
        <a-row v-else class="rowBox">
          <a-col :xs="24">
            <packup-elipsis :text="originReleaseNotes[language].acknowledgements"></packup-elipsis>
          </a-col>
        </a-row>
      </a-form-model-item>
    </a-form-model>
  </custom-modal>
</template>
<script>
import PackupElipsis from '@/components/Ellipsis/PackupElipsis'
import CustomModal from '@/components/CustomModal/index.vue'
import CustomTextArea from '@/components/CustomTextArea/index.vue'
import lodash from 'lodash'
import { initReleaseNoteLangs as releaseNoteLangs, initReleaseNoteOptions } from '@/config/global'
const initCheckConfig = {
  zh_CN: {
    description: {
      validateStatus: ''
    },
    functionAddition: {
      validateStatus: ''
    },
    functionOptimization: {
      validateStatus: ''
    }
  },
  en_US: {
    description: {
      validateStatus: ''
    },
    functionAddition: {
      validateStatus: ''
    },
    functionOptimization: {
      validateStatus: ''
    }
  }
}
export default {
  name: 'ReleaseNoteLanguage',
  components: {
    PackupElipsis,
    CustomModal,
    CustomTextArea
  },
  props: {
    width: {
      type: Number,
      default: 800
    },
    isEdit: {
      type: Boolean,
      default: true
    },
    releaseNotes: {
      type: Array,
      default () {
        return []
      }
    },
    lang: {
      type: String,
      default: 'zh_CN'
    },
    noshowItem: {
      type: Array,
      default () {
        return []
      }
    },
    // 哪些字段是必填写的
    requireFields: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      releaseNoteLangs,
      originReleaseNotes: lodash.cloneDeep(initReleaseNoteOptions),
      visible: false,
      language: 'zh_CN',
      checkConfig: lodash.cloneDeep(initCheckConfig)
    }
  },
  computed: {
    rules () {
      const rules = {
        functionAddition: [{ min: 0, max: 500, message: this.$t('length500'), trigger: 'change' }],
        functionOptimization: [{ min: 0, max: 500, message: this.$t('length500'), trigger: 'change' }],
        acknowledgements: [{ min: 0, max: 500, message: this.$t('length500'), trigger: 'change' }],
        description: [{ min: 0, max: 45, message: this.$t('length500'), trigger: 'change' }]
      }
      return rules
    }
  },
  watch: {
    visible: {
      handler (val) {
        if (val) {
          if (this.releaseNotes.length) {
            this.setDefaultData()
          } else {
            this.resetData()
          }
          this.language = this.lang
        }
      },
      immediate: true
    }
  },
  mounted () {
  },
  methods: {
    handleCancel () {
      this.resetData()
      this.visible = false
    },
    handlerChange (language, key, val) {
      this.originReleaseNotes[language][key] = val
      this.checkInputIsOk(language, key)
    },
    handleOk () {
      const flag = this.requireFields.length === 0 || this.checkAllInputIsOk()
      if (!flag) {
        this.$message.error(this.$t('releaseNoterequiredEmptyTip'))
        return
      }

      this.visible = false
      const arr = this.releaseNoteLangs.map(lang => {
        return {
          ...this.originReleaseNotes[lang]
        }
      })
      this.resetData()
      this.$emit('save', arr)
    },
    checkAllInputIsOk () {
      const result = []
      // eslint-disable-next-line no-restricted-syntax
      for (const lang in this.originReleaseNotes) {
        // eslint-disable-next-line no-restricted-syntax
        for (const key in this.originReleaseNotes[lang]) {
          result.push(this.checkInputIsOk(lang, key))
        }
      }
      return !result.some(item => item === false)
    },
    // 检测输入的是否符合规则
    checkInputIsOk (lang, key) {
      if (!this.requireFields.includes(key) || !this.checkConfig[lang][key]) {
        return true
      }
      const val = this.originReleaseNotes[lang][key].replace(/^\s+|\s+$/g, '')
      if (val.length === 0) {
        this.checkConfig[lang][key].validateStatus = 'error'
        return false
      }
      this.checkConfig[lang][key].validateStatus = 'success'
      return true
    },
    setDefaultData () {
      this.releaseNotes.forEach(item => {
        const key = item.language
        if (this.originReleaseNotes[key]) {
          this.originReleaseNotes[key] = { ...item }
        }
      })
    },
    resetData () {
      this.language = 'zh_CN'
      this.originReleaseNotes = lodash.cloneDeep(initReleaseNoteOptions)
      this.checkConfig = lodash.cloneDeep(initCheckConfig)
    },
    toggleVisible (val) {
      this.visible = val
    }
  }
}
</script>
<style  lang="less">
.releaseNoteLanguageComp {
  .rowBox {
    border: 1px solid @borderColor;
    padding: 10px 15px;
    line-height: 2em;
    border-radius: 4px;
    text-align: justify;
  }
  .ant-form-explain {
      font-size: 1.2rem;
      min-height: 1.6rem;
      display: none;
    }
  .requiredFormItem {
    label {
      &::after {
        display: inline-block;
        margin-right: 4px;
        color: #f5222d;
        font-size: 1.4rem;
        font-family: SimSun, sans-serif;
        line-height: 1;
        content: '*';
      }
    }

    .has-error {
      .ant-form-explain {
        display: block;
      }
    }

    .has-success {
      .ant-form-explain {
        display: none;
      }
    }
  }
}
</style>
